<template>
    <div>
        <div ref="onlineNum1" class="onlineNum1"></div>
        <div ref="onlineNum2" class="onlineNum2"></div>
        <div class="setting">
            <div style="position: absolute;top: 8%;left: 5%;background-color: rgb(255, 255, 255,0.5);height: 20%;width: 90%;border-radius: 10px;">
                <span style="position: absolute;left: 25%;top: 5%; font-size: medium">修改最大容量人数</span>
                <input v-model="inputValue1" placeholder="请输入最大容量人数" type="text" style="position: absolute;top: 45%;left: 10%;height: 40%;font-size: 15%;">
                <el-button @click="updata1" type="primary" :icon="Search" style="position: absolute;left: 65%;top: 45%;">修改</el-button>
            </div>
            <div style="position: absolute;top: 30%;left: 5%;background-color: rgb(255, 255, 255,0.5);height: 20%;width: 90%;border-radius: 10px;">
                <!-- <button @click="identifNum">获取人数</button> -->
                <span style="position: absolute;left: 25%;top: 5%; font-size: medium">修改当前在线人数</span>
                <input v-model="inputValue2" placeholder="请输入当前在线人数" type="text"  style="position: absolute;top: 45%;left: 10%;height: 40%;font-size: 15%;">
                <el-button @click="updata2" type="primary" :icon="Search" style="position: absolute;left: 65%;top: 45%;">修改</el-button>
            </div>
            <div style="position: absolute;top: 52%;left: 5%;background-color: rgb(255, 255, 255,0.5);height: 20%;width: 90%;border-radius: 10px;">
                <span style="position: absolute;left: 25%;top: 5%; font-size: medium">选择图片进行识别</span>
                <input v-model="imageURL" placeholder="请输入图片的url地址" type="text" style="position: absolute;top: 45%;left: 10%;height: 40%;font-size: 15%;">
                <el-button @click="updata3" type="primary" :icon="Search" style="position: absolute;left: 65%;top: 45%;">识别</el-button>
            </div>
            <div style="position: absolute;top: 74%;left: 5%;background-color: rgb(255, 255, 255,0.5);height: 20%;width: 90%;border-radius: 10px;">
                <span style="position: absolute;left: 25%;top: 5%; font-size: medium">未开发功能4</span>
                <input type="text" style="position: absolute;top: 45%;left: 10%;height: 40%;font-size: 15%;">
                <el-button type="primary" :icon="Search" style="position: absolute;left: 65%;top: 45%;">修改</el-button>
            </div>
        </div>
        <div class="tableBox">

            <el-button type="primary" @click="openWindow" :icon="Search" style="position: absolute;left: 1%;top: 1%;">添加</el-button>

            <input type="text" placeholder="请输入电话号码" v-model="phoneNumber" style="position: absolute; left: 6%;top: 1%; height: 6%;width: 13%; padding-left: 1%;font-size:large;">
            <el-button type="success" @click="inquire" style="position: absolute;left: 21%;top: 1%;">查询</el-button>
            <div class="table">
                <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="id" label="ID" width="200" />
                <el-table-column prop="name" label="姓名" width="200" />
                <el-table-column prop="phone_num" label="电话号码" width="200" />
                <el-table-column prop="clock_days" label="打卡天数" width="200" />
                <el-table-column prop="free_time" label="预约时间" width="500" />
                <el-table-column fixed="right" label="Operations" width="120">
                    <template #default="{row}">
                    <el-button link type="primary" size="small" @click="handleClick(row)">Detail</el-button>
                    <el-button link type="primary" size="small" @click="editClick">Edit</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                />
            </div>
        </div>

    </div>
</template>

<script>
import { ElTable, ElTableColumn, ElButton,ElPagination,ElMessageBox,ElMessage,} from 'element-plus'
import * as echarts from "echarts";
import CryptoJS from 'crypto-js';
import axios from 'axios';

    export default{
        components:{
            ElTable,
            ElTableColumn,
            ElButton,
            ElPagination,
            // ElDialog,
            // ElForm,
            // ElFormItem,
            // ElInput
        },
        data(){
            return{
                imageURL:"",
                inputValue1:"",
                inputValue2:"",
                peopleNum:10,// 当前人数
                maxPeopleNum:50, // 最大人数
                currentPage: 1,
                pageSize: 9,
                total: 1000,
                phoneNumber:'',
                isWindowOpen: false,
                tableData:[
                
                ]
            }
        },
        mounted(){
            // console.log(this.$serverPort)
            this.initonlineNum1();
            this.initonlineNum2();
            this.getPageData()
        },
        watch: {
            // 分页查找
            currentPage(newValue) {
                console.log("你点击的页码是：", newValue);
                this.currentPage = newValue
                this.getPageData()
            },
            pageSize(newValue) {
            console.log("每页数量改变为：", newValue);
            },
        },
        methods: {


            //查询用户
            inquire(){
                if(this.$data.phoneNumber != ''){
                    axios.get("http://localhost:8082/user/getByPhone/"+this.$data.phoneNumber)
                    .then(response=>{
                        console.log(response.data)
                        console.log(response.data.data)
                        this.tableData = []
                        this.tableData[0] = response.data.data
                    })
                }
                else this.getPageData()
            },


            // 修改用户
            editClick() {
                ElMessageBox.prompt('请输入姓名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator: this.validateInput,
                inputPattern: /[\s\S]+/,
                inputValue:"一勺中子星16",
                inputErrorMessage: '请输入有效的用户信息',
                }).then(({ value }) => {
                // 用户点击确定按钮后获取输入的新用户信息
                if (value) {
                    // 执行相应的逻辑操作，例如更新用户信息
                    console.log('新的用户信息:', value);
                }
                }).catch(error=>{
                    console.log(error)
                })
            },

            //删除用户
            handleClick(row){
                ElMessageBox.confirm("确定删除?","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    console.log(row.phone_num)
                    axios.post("http://localhost:8082/user/updataProperty",{
                        property_name: "is_delete",
                        property_value: 1,
                        phone_num: row.phone_num
                    }).then(response=>{
                        this.getPageData()
                        console.log(response)
                        ElMessage({
                            message: '操作成功',
                            type: 'success',
                        })
                    }).catch(error=>{
                        console.log(error)
                    })
                }).catch(error =>{
                    console.log(error)
                })
            },


            // 获取分页查找的数据
            getPageData(){
                axios.get('http://localhost:8082/user/getByDaysPage'+"/"+this.currentPage+"/"+this.pageSize, {
                })
                .then(response => {
                    // 处理响应数据
                    console.log(response)
                    // const jsonData = response
                    // console.log(response.data.data.records)
                    for(let i = 0;i<this.pageSize;i++){
                        this.tableData[i] = response.data.data.records[i]
                    }
                    this.total = response.data.data.total
                })
                .catch(error => {
                    // 处理错误
                    console.log(error)
                });
            },



    
            // 修改当前人数
            updata2(){
                ElMessageBox.confirm('确认要修改最大容量人数吗','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.peopleNum = this.inputValue2;
                this.initonlineNum1();
            })
            },



            // 根据URL找到图片并且识别图片中的人数
            updata3(){
                var appId = "1cSvlm9c7Fc1DXPC"
                var appSecret = "45fb497cffb2ecdd9c36291da13d09ee"
                var timestamp = Date.now()
                var source = appId + appSecret + timestamp;
                var sign = CryptoJS.SHA256(source).toString();
                console.log(sign)
                console.log(timestamp)
                ElMessageBox.confirm('确认要修改最大容量人数吗','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                axios.post("https://api.jumdata.com/traffic/statistics",{
                    url:this.imageURL
                },
                {
                    headers:{
                        appid:appId,
                        timestamp:timestamp,
                        sign:sign,
                        productCode:"traffic_statistics",
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(response => {
                    console.log("请求成功",response.data)
                    this.peopleNum = response.data.data.personNum
                    this.initonlineNum1();
                })
            })
            },


            // 修改最大容量人数
            updata1() {
            ElMessageBox.confirm('确认要修改最大容量人数吗','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                    axios.post("http://localhost:8082/setting/settingUpdataProperty", 
                {
                    property_name: "max_num",
                    property_value: this.$data.inputValue1,
                    id: "1"
                }).then(response => {
                    console.log(response);
                    if(response.data.flag == false){
                        alert('仅允许输入数字')
                    }
                    else {
                        ElMessage({
                            message: '操作成功',
                            type: 'success',
                        })
                        this.maxPeopleNum = this.inputValue1
                        this.initonlineNum1()
                    }
                }).catch(error => {
                    console.error(error);
                    
                });
            }).catch(()=>{

            })

            },


            // 在线人数图
            initonlineNum1(){
                const Chart = echarts.init(this.$refs.onlineNum1);
                const option={
                    //     grid: {
                    //     left: '10px',
                    //     top: '10px',
                    //     right: 'auto',
                    //     bottom: 'auto',
                    //     containLabel: true
                    // },
                    series: [
                    {
                    type: 'gauge',
                    max:this.maxPeopleNum,
                    axisLine: {
                        lineStyle: {
                        width: 30,
                        color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                        ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                        color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                        color: '#fff',
                        width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                        color: '#fff',
                        width: 2
                        }
                    },
                    axisLabel: {
                        color: 'inherit',
                        distance: -30,
                        fontSize: 20
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}人',
                        color: 'inherit'
                    },
                    data: [
                        {
                        value: this.$data.peopleNum
                        }
                    ]
                    }
                ]
                }
                Chart.setOption(option);
            },
            // 在线人数图

            // 在线人数折线图
            initonlineNum2(){
                const Chart = echarts.init(this.$refs.onlineNum2);
                const option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['17:00', '18:00', '19:00', '20:00', '21:00','22:00']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        name: '17:00',
                        type: 'line',
                        stack: 'Total',
                        data: [8, 23, 25, 26, 20, 21, 10]
                        },
                        {
                        name: '18:00',
                        type: 'line',
                        stack: 'Total',
                        data: [14, 23, 25, 26, 20, 30, 114]
                        },
                        {
                        name: '19:00',
                        type: 'line',
                        stack: 'Total',
                        data: [2, 23, 25, 26, 20, 14, 19]
                        },
                        {
                        name: '20:00',
                        type: 'line',
                        stack: 'Total',
                        data: [13, 22, 21, 26, 20, 16, 18]
                        },
                        {
                        name: '21:00',
                        type: 'line',
                        stack: 'Total',
                        data: [6, 5, 25, 26, 20, 13, 11]
                        },
                        {
                        name: '22:00',
                        type: 'line',
                        stack: 'Total',
                        data: [8, 21, 25, 27, 20, 19, 20]
                        }
                    ]
                }
                Chart.setOption(option)
            }
            // 在线人数折线图
        }
    }
</script>

<style>
.onlineNum1{
    position: absolute;
    top: 2%;
    left: 16%;
    height: 41%;
    width: 30%;
    border-radius: 20px;
    background-color: rgba(184, 184, 184, 0.5);
}
.onlineNum2{
    position: absolute;
    top: 2%;
    left: 47%;
    height: 33%;
    width: 28%;
    padding: 2%;
    border-radius: 20px;
    background-color: rgba(184, 184, 184, 0.5);
}
.tableBox{
    position: absolute;
    top: 44%;
    width: 83%;
    height: 55%;
    left: 16%;
    border-radius: 10px;
    background-color: rgba(184, 184, 184, 0.5);
}
.table{
    position: absolute;
    top: 9%;
    width: 100%;
    height: 82%;
    background-color: rgba(255, 255, 255, 0.5);
}
.page{
    position: absolute;
    top: 447px;
    left: 35%;
}
</style>


<style scoped>
.el-table {
    text-align: left;
}
.setting{
    position: absolute;
    height: 41%;
    width: 19%;
    top: 2%;
    left: 80%;
    border-radius: 20px;
    background-color: rgba(184, 184, 184, 0.5);
}
</style>